<template>
  <div class="Emp_recruit" style="">
    <!-- data: {{dataList}} -->
    <section class='section'>
      <div class="Emp_recruit_head">
        <h2 class="list_title">{{title}}</h2>
        <div class="query_all" >
          <a :href="routeUrl" target="_blank">查看全部</a>
        </div>
      </div>
      <ul class="main_list">
      	<template v-if='dataList && dataList.length>0'>
	        <li class="main_items"  v-for="(item,index) in dataList" :key="item.id">
	          <router-link :to="{ path:'/noticeAll', query: { id: item.id, tabInfo: tabInfo, flag: 'fromEmpl'} }" style="display: block;" target="_blank">
	            <div class="serial"></div>
	            <div class="info ellipsis" :title='item.title_name'>{{item.title_name}}</div>
	            <div class="time">{{item.author_time}}</div>
	          </router-link>
	        </li>
        </template>
        <li v-else>
            <div class="imgBox"><img src="../../../static/images/nodata.svg" alt=""></div>
            <p class="data">暂无数据</p>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
  // import Axios from 'axios'
  import Vue from 'vue'
  

  export default {
    name: 'Emp_list',
    props: ['dataList', 'title', 'tabInfo'],
    data(){
			return {

			}
    },
    created () {
      
    },
		methods:{

    },
		components:{

    },
    computed: {
      items () {
        return this.dataList
      },
      routeUrl:function(){
        return "#/noticeAll?tabInfo=" + this.tabInfo
      }
    },
   	mounted () {
      for(var i=0;i<this.dataList.length;i++){
        this.dataList[i].author_time = this.dataList[i].author_time.substr(5,5).replace(/-/, ".")
      }
    }
  }
</script>

<style scoped>
.Emp_recruit {
  padding: 10px 30px;
}
.Emp_recruit .Emp_recruit_head {
  overflow: hidden;
  height: 25px;
  line-height: 25px;
}
.Emp_recruit .Emp_recruit_head .list_title {
  float: left;
  width: 50%;
  font-size: 16px;
}
.Emp_recruit .Emp_recruit_head .query_all {
  float:right;
  color: #38f;
  width: 50%;
  text-align: right;
  font-size: 12px;
}
.Emp_recruit .main_list {
  margin-top: 10px;
}
.Emp_recruit .main_list .main_items {
  height: 35px;
  line-height: 35px;
  overflow: hidden;
  /* cursor: pointer; */
}
/*.Emp_recruit .main_list .main_items:hover {
  background: #ccc;
}*/
.Emp_recruit .main_list .main_items .serial {
  width: 8px;
  height: 8px;
  background: #38f;
  float: left;
  margin-right: 15px;
  position: relative;
  top: 13px;
  border-radius: 2px;
}
.Emp_recruit .main_list .main_items .info {
  width: 70%;
  float: left;
  font-size: 16px;
}
.Emp_recruit .main_list .main_items .time {
  width: 22%;
  float: right;
  text-align: right;
  color: #999;
}
.Emp_recruit div.imgBox {
    background-color: rgba(0, 0, 0, 0.01);
    text-align: center;
    border-radius: 50%;
    padding: 30px;
    width: 160px;
    height: 160px;
    line-height: 160px;
    margin: 0 auto;
    margin-top: 20px;

  }
 .Emp_recruit div.imgBox img {
      display: inline-block;
      height: 100px;
      width: 100px;
    }
.Emp_recruit p.data {
    margin-top: 25px;
    text-align: center;
  }
</style>
